<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极简番茄时钟</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #FF6B6B;
            --secondary-color: #4ECDC4;
            --text-color: #2C3E50;
        }

        body {
            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: #F8F9FA;
            color: var(--text-color);
            height: 100vh;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .device {
            position: relative;
            width: 375px;
            height: 812px;
            background: white;
            border-radius: 40px;
            box-shadow: 0 0 0 11px #1f1f1f, 0 0 0 13px #191919, 0 0 0 20px #111;
            overflow: hidden;
        }

        .device-screen {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 40px;
            overflow: hidden;
            background: white;
        }

        .timer-circle {
            width: 280px;
            height: 280px;
            border-radius: 50%;
            border: 15px solid var(--primary-color);
            position: relative;
            margin: 100px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(255, 107, 107, 0.2);
        }

        .timer-display {
            font-size: 3.5rem;
            font-weight: 500;
            color: var(--text-color);
        }

        .control-button {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: none;
            background: var(--primary-color);
            color: white;
            font-size: 1.5rem;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
            transition: all 0.3s ease;
        }

        .control-button:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
        }

        .mode-switch {
            display: flex;
            gap: 20px;
        }

        .mode-button {
            padding: 8px 20px;
            border-radius: 20px;
            border: none;
            background: transparent;
            color: var(--text-color);
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .mode-button.active {
            background: var(--secondary-color);
            color: white;
            box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
        }
    </style>
</head>
<body>
    <div class="device">
        <div class="device-screen">
            <div class="container h-100 d-flex flex-column align-items-center justify-content-between py-4">
                <div class="timer-circle">
                    <div class="timer-display">25:00</div>
                </div>
                <div class="d-flex justify-content-center">
                    <button class="control-button" id="timer-control">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="play-icon">
                            <path d="M8 6.82001V17.18C8 17.97 8.87 18.45 9.54 18.02L17.68 12.84C18.3 12.45 18.3 11.55 17.68 11.15L9.54 5.98001C8.87 5.55001 8 6.03001 8 6.82001Z" fill="white"/>
                        </svg>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="pause-icon" style="display: none;">
                            <rect x="7" y="6" width="3" height="12" rx="1" fill="white"/>
                            <rect x="14" y="6" width="3" height="12" rx="1" fill="white"/>
                        </svg>
                    </button>
                </div>
                <div class="mode-switch">
                    <button class="mode-button active">专注</button>
                    <button class="mode-button">休息</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>